<template>
  <div class="container">
    <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
      <div style="width: 10px;height: 35px;background: #0060bf;">
      </div>
      <div style="margin-left: 10px;font-size: 20px;">人员基本信息 (风险值: <span
          style="color: #f56c6c;font-weight: 600">80</span>)
      </div>
    </div>
    <div class="top-div">
      <el-descriptions :column="3" border style="width: 100%;margin-right: 20px;">
        <el-descriptions-item
            label-class-name="my-label" content-class-name="my-content"
            label="所在单位">
          {{ userDetail.deptName }}
        </el-descriptions-item>
        <el-descriptions-item
            label-class-name="my-label" content-class-name="my-content"
            label="姓名">
          {{ userDetail.name }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号码"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.idNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="职务"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.position }}
        </el-descriptions-item>
        <el-descriptions-item label="职级"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.userType }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.telephone }}
        </el-descriptions-item>

        <el-descriptions-item label="籍贯"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.birthPlace }}
        </el-descriptions-item>
        <el-descriptions-item label="民族"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.race }}
        </el-descriptions-item>
        <el-descriptions-item label="性别"
                              label-class-name="my-label" content-class-name="my-content">
          {{ userDetail.sex }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <div style="margin-bottom: 10px;">
        <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;margin-bottom: 10px;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;">标星案件列表
          </div>
        </div>
        <div style="align-items: center;display: flex;justify-content: space-between;">
          <dvi>
            <el-input style="width: 200px;margin-left: 20px;" clearable v-model="dirNameInput" placeholder="请输入案件分类"></el-input>
            <el-input style="width: 200px;margin-left: 20px;" clearable v-model="dirCaseIdInput" placeholder="请输入案号"></el-input>
            <el-button style="margin-left: 20px;" type="primary" size="small" @click="getTableList2">查询</el-button>
          </dvi>
          <el-button
              style="margin-bottom: 10px;float:right;margin-right: 10px;"
              type="primary"
              size="small"
              @click="batchDeleteClassify"
          >批量取消
          </el-button>
        </div>
      </div>
      <el-table v-loading="tableShow2" :data="tableData2"
                element-loading-text="正在加载中......."
                @selection-change="handSelectionChange2"
                @sort-change="sortByColumn2"
                style="width: 100%;overflow-y: auto;">
        <el-table-column type="selection" width="55" align="center"/>

        <el-table-column label="案件分类" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.dirName">
              <div class="tip-cell">
                <el-tag effect="plain" type="primary">{{ scope.row.dirName }}</el-tag>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="案件备注" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.remark">
              <div class="tip-cell">
                {{ scope.row.remark }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="案号" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.caseId">
              <div class="tip-cell">
                {{ scope.row.caseId }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="风险值" align="center" prop="totalRisk" sortable='custom' min-width="50">
          <template slot-scope="scope">
            <div v-if="scope.row.riskChange>0" style="display: flex;justify-content: center;">
              <div style="float: left;margin-top: 10px">
                <span>{{ scope.row.totalRisk }}</span>
              </div>
              <div style="float: left;">
                <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-top: 10px;">
                <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">{{
                    scope.row.riskChange
                  }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.riskChange == 0" style="display: flex;justify-content: center;">
              <div style="float: left;margin-bottom: 10px">
                <span>{{ scope.row.totalRisk }}</span>
              </div>
            </div>
            <div v-else style="display: flex;justify-content: center;">
              <div style="float: left;margin-bottom: 10px">
                <span>{{ scope.row.riskChange }}</span>
              </div>
              <div style="float: left;">
                <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-bottom: 10px;">
                <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{
                    scope.row.riskChange
                  }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标题" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.title">
              <div class="tip-cell">
                {{ scope.row.title }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="案件类型" align="center" min-width="40">
          <template slot-scope="scope">
            <span v-if="scope.row.caseType==1">民事案件</span>
            <span v-if="scope.row.caseType==2">行政案件</span>
            <span v-if="scope.row.caseType==3">刑事案件</span>
          </template>
        </el-table-column>
        <el-table-column label="案由" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.caseCause }}</span>
          </template>
        </el-table-column>
        <el-table-column label="案件特征" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.caseFeature">
              <div class="tip-cell">
                {{ scope.row.caseFeature }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="风险值1" align="center" min-width="50" prop="risk1" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="风险值2" align="center" min-width="50" prop="risk2" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="风险值3" align="center" min-width="50" prop="risk3" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收案日期" align="center" min-width="50" prop="registerDate" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.registerDate }}</span>
          </template>
        </el-table-column>
        <!--      <el-table-column label="操作" align="center" min-width="30">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span style="color: #409EFF;cursor:pointer;" @click="showDetail(scope.row)">详情</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
      </el-table>
      <div style="display: flex;justify-content: center;padding-top: 10px;">
        <el-pagination
            background
            :total="totalCount2"
            :page-size="pageSize2"
            @current-change="current_change2"
            @size-change="handleSizeChange2"
        >
        </el-pagination>
      </div>
    </div>

    <div>
      <div style="margin-bottom: 10px;">
        <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;margin-bottom: 10px;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;">案件推送信息
          </div>
        </div>
        <div style="align-items: center;display: flex;justify-content: space-between;">
          <dvi>
            <el-input style="width: 200px;margin-left: 20px;" clearable v-model="caseIdInput" placeholder="请输入案号"></el-input>
            <el-button style="margin-left: 20px;" size="small" type="primary" @click="getTableList1">查询</el-button>
          </dvi>
          <el-button
              style="margin-bottom: 10px;float:right;margin-right: 10px;"
              type="primary"
              size="small"
              @click="batchDelete"
          >批量处理
          </el-button>
        </div>
      </div>
      <el-table v-loading="tableShow1" :data="tableData1"
                element-loading-text="正在加载中......."
                @sort-change="sortByColumn1"
                @selection-change="handSelectionChange"
                style="width: 100%;overflow-y: auto;">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="案件处理意见" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.handleRemark">
              <div class="tip-cell">
                {{ scope.row.handleRemark }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="推送人" align="center" min-width="40">
          <template slot-scope="scope">
            <span>{{ scope.row.pushUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="案号" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.caseId">
              <div class="tip-cell">
                {{ scope.row.caseId }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="风险值" align="center" prop="totalRisk" sortable='custom' min-width="50">
          <template slot-scope="scope">
            <div v-if="scope.row.riskChange>0" style="display: flex;justify-content: center;">
              <div style="float: left;margin-top: 10px">
                <span>{{ scope.row.totalRisk }}</span>
              </div>
              <div style="float: left;">
                <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-top: 10px;">
                <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">{{
                    scope.row.riskChange
                  }}</span>
              </div>
            </div>
            <div v-else-if="scope.row.riskChange == 0" style="display: flex;justify-content: center;">
              <div style="float: left;margin-bottom: 10px">
                <span>{{ scope.row.totalRisk }}</span>
              </div>
            </div>
            <div v-else style="display: flex;justify-content: center;">
              <div style="float: left;margin-bottom: 10px">
                <span>{{ scope.row.totalRisk }}</span>
              </div>
              <div style="float: left;">
                <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-bottom: 10px;">
                <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{
                    scope.row.riskChange
                  }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标题" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.title">
              <div class="tip-cell">
                {{ scope.row.title }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="案件类型" align="center" min-width="40">
          <template slot-scope="scope">
            <span v-if="scope.row.caseType==1">民事案件</span>
            <span v-if="scope.row.caseType==2">行政案件</span>
            <span v-if="scope.row.caseType==3">刑事案件</span>
          </template>
        </el-table-column>
        <el-table-column label="案由" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.caseCause }}</span>
          </template>
        </el-table-column>
        <el-table-column label="案件特征" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.caseFeature">
              <div class="tip-cell">
                {{ scope.row.caseFeature }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="风险值1" align="center" min-width="50" prop="risk1" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="风险值2" align="center" min-width="50" prop="risk2" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="风险值3" align="center" min-width="50" prop="risk3" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.risk3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收案日期" align="center" min-width="50" prop="registerDate" sortable='custom'>
          <template slot-scope="scope">
            <span>{{ scope.row.registerDate }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: center;padding-top: 10px;margin-bottom: 10px;">
        <el-pagination
            background
            :total="totalCount2"
            :page-size="pageSize2"
            @current-change="current_change1"
            @size-change="handleSizeChange1"
        >
        </el-pagination>
      </div>
    </div>
<!--    <show-case-dialog-->
<!--        @afterSubmit="getTableList"-->
<!--        ref="showCaseDialog"-->
<!--    ></show-case-dialog>-->
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";
import {listApi} from '@/api/caseCollectApi'
import showCaseDialog from "@/page/dialog/showCaseDialog.vue";
import {remove, batchDeleteApi} from "@/api/caseCollectApi";
import {detail} from "@/api/userApi";
import {dirListApi,batchDeleteDirApi} from "@/api/caseDirApi";

export default {
  components: {
    showCaseDialog
  },
  mounted() {
    // this.addLog()
    this.getUserDetail()
  },
  computed: {},
  data() {
    return {
      caseTypeOptions: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '民事'
        },
        {
          value: 2,
          label: '行政'
        },
        {
          value: 3,
          label: '刑事'
        }
      ],
      dirNameInput: '',
      dirCaseIdInput: '',
      caseIdInput: '',
      caseId: '',
      title: '',
      caseType: 0,
      riskType: 0,
      options: [{
        value: 0,
        label: '全部'
      }, {
        value: 1,
        label: '仅风险上升'
      }, {
        value: 2,
        label: '仅风险下降'
      }],
      pageNum1: 1,
      pageNum2: 1,
      pageSize1: 5,
      pageSize2: 5,
      tableShow1: false,
      tableShow2: false,
      totalCount1: 1,
      totalCount2: 1,
      userId: this.$globalUserId,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData1: [],
      tableData2: [],
      sourceTableData: [],
      selectDataList: [],
      selectDataList2: [],
      userDetail: {
        name: '',
        sex: '',
        telephone: '',
        race: '',
        idNumber: '',
        deptName: '',
        position: '',
        birthPlace: '',
        userType: ''
      },
      queryTableForm2:{
        orderColumn:'',
        orderWay:'',
      },
      queryTableForm1:{
        orderColumn:'',
        orderWay:'',
      }
    }
  },
  methods: {
    sortByColumn2(column){
      this.queryTableForm2.orderColumn = column.prop
      this.queryTableForm2.orderWay = column.order

      this.getTableList2()

    },
    sortByColumn1(column){
      this.queryTableForm1.orderColumn = column.prop
      this.queryTableForm1.orderWay = column.order

      this.getTableList1()

    },
    batchDeleteClassify() {
      if (this.selectDataList2.length == 0) {
        this.$message.error('暂无勾选数据');
        return
      }
      const self = this
      const obj = {}
      obj.ids = self.selectDataList2.map(item => item.caseDirId)
      batchDeleteDirApi(obj).then(data => {
        if (data.code == 200) {
          self.getTableList2()
        } else {
          self.$message.error(data.msg);
        }
      })

    },
    batchDelete() {
      if (this.selectDataList.length == 0) {
        this.$message.error('暂无勾选数据');
        return
      }
      const self = this
      const obj = {}
      obj.ids = self.selectDataList.map(item => item.caseCollectId)
      batchDeleteApi(obj).then(data => {
        if (data.code == 200) {
          self.getTableList1()
        } else {
          self.$message.error(data.msg);
        }
      })

    },
    handSelectionChange(val) {
      this.selectDataList = val
    },
    handSelectionChange2(val){
      this.selectDataList2 = val
    },
    getUserDetail() {
      const self = this
      const obj = {}
      obj.id = self.userId
      detail(obj).then(data => {
        if (data.code == 200) {
          self.userDetail = data.data
          self.getTableList1()
          self.getTableList2()
        } else {
          self.$message.error(data.msg);
        }
      })
    },

    showCaseDialogFunction(data) {
      if (data.caseCollectId != null && data.collectFlag == 1) {
        const self = this
        const obj = {}
        obj.id = data.caseCollectId
        remove(obj).then(data => {
          if (data.code == 200) {
            self.getTableList()
          } else {
            self.$message.error(data.msg);
          }
        })


      } else {
        this.$refs.showCaseDialog.open(data);
      }


    },
    getTableList1() {
      const self = this;
      self.tableShow1 = true
      const param = {}
      param.pageNum = self.pageNum1
      param.pageSize = self.pageSize1
      param.userId = self.userId
      param.caseIdInput = self.caseIdInput
      param.orderColumn = this.queryTableForm1.orderColumn
      param.orderWay = this.queryTableForm1.orderWay

      listApi(param).then(response => {
        if (response.code == 200) {
          self.tableData1 = response.data.data;
          self.totalCount1 = response.data.total;
          self.tableShow1 = false
          if (self.totalCount1 !== 0) {
            if (self.pageNum1 > Math.ceil(response.data.total / self.pageSize1)) {
              self.pageNum1 = Math.ceil(response.data.total / self.pageSize1);
              self.getTableList1();
            }
          }
        } else {
          self.$message.error(response.msg);
        }
      })
    },
    getTableList2() {
      const self = this;
      self.tableShow2 = true
      const param = {}
      param.pageNum = self.pageNum2
      param.pageSize = self.pageSize2
      param.userId = self.userId
      param.dirNameInput = self.dirNameInput
      param.dirCaseIdInput = self.dirCaseIdInput
      param.orderColumn = this.queryTableForm2.orderColumn
      param.orderWay = this.queryTableForm2.orderWay


      dirListApi(param).then(response => {
        if (response.code == 200) {
          self.tableData2 = response.data.data;
          self.totalCount2 = response.data.total;
          self.tableShow2 = false
          if (self.totalCount2 !== 0) {
            if (self.pageNum2 > Math.ceil(response.data.total / self.pageSize2)) {
              self.pageNum2 = Math.ceil(response.data.total / self.pageSize2);
              self.getTableList2();
            }
          }
        } else {
          self.$message.error(response.msg);
        }
      })
    },
    current_change1(currentPage) {
      this.pageNum1 = currentPage;
      this.getTableList1();
    },
    current_change2(currentPage) {
      this.pageNum2 = currentPage;
      this.getTableList2();
    },
    handleSizeChange1(newPageSize) {
      this.pageSize1 = newPageSize;
      this.getTableList1();
    },
    handleSizeChange2(newPageSize) {
      this.pageSize2 = newPageSize;
      this.getTableList2();
    },
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件风险数据'
      obj.content = '查看了【案件风险详情】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    showDetail(item) {
      console.log(item)
      const data = {
        doc_id: item.doc_id,
        case_no: item.case_no,
        procedure: item.procedure,
        case_category: item.case_category,
        case_type: item.case_type,
        first_instance: item.first_instance,
        dispute_focus: item.dispute_focus,
        bottomDataList: item.parties
      }
      localStorage.setItem("detailKey", JSON.stringify(data))
      this.$router.push({
        path: '/detail'
      })
    },
    // sortChange(val) {
    //   if (val == '全部') {
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   } else if (val == '仅风险上升') {
    //     this.tableData = this.tableData.filter(d => d.total_risk_change_value > 0);
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   } else if (val == '仅风险下降') {
    //     this.tableData = this.tableData.filter(d => d.total_risk_change_value < 0);
    //     this.total = this.tableData.length
    //     this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    //   }
    // },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    resetTable() {
      this.caseId = ''
      this.title = ''
      this.caseType = 0
      this.riskType = 0
    },
  }
};
</script>
<style scoped>
.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  flex-direction: column;
}

.el-input {
  font-size: 13px;
}

.container {
  display: block;
  clear: both;
  width: 100%;
  height: calc(100vh - 40px);

  overflow-y: auto;
  overflow-x: hidden;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}

.tip-cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制文本最多显示两行 */
  overflow: hidden;
  white-space: normal; /* 允许换行 */
}

.el-tooltip {
  max-width: 300px; /* 设置 Tooltip 的最大宽度，可以根据需要调整 */
}

.my-label {
  background: #E1F3D8;
}

/deep/ .el-descriptions-item__label.is-bordered-label {
  background: #e8f5fe;
}

/deep/ .el-descriptions-item__content {
  word-break: break-word;
  overflow-wrap: break-word;
  background: #f0f7ff;

}

.my-content {
  background: #FDE2E2;
}
</style>